<template>
  <div id="take-goods">
    <van-popup v-model="takeGoodsShow" position="bottom" round @click-overlay="closePopup">
      <div class="popup-pane">
        <div class="top-pane">
          <span class="name">提货</span>
          <van-icon name="cross" class="close-icon" @click="closePopup" />
        </div>
        <div class="type" v-if="chooseRadio">
          <span class="type-name">类型</span>
          <van-radio-group v-model="chooseRadio" direction="horizontal">
            <van-radio :name="1" checked-color="#F51D1D" v-if="manage_goods.original.show">基酒</van-radio>
            <van-radio :name="2" checked-color="#F51D1D" v-if="manage_goods.product.show">成品酒</van-radio>
          </van-radio-group>
        </div>
        <div class="num">
          <span class="num-name">数量</span>
          <van-stepper v-model="numValue" theme="round" button-size="22" disable-input />
        </div>
        <div class="tip">可提货数量{{chooseRadio == 1 ? manage_goods.original.can_take : manage_goods.product.can_take}}，最低提货数量{{chooseRadio == 1 ? manage_goods.original.limit : manage_goods.product.limit}}</div>
        <span class="btn-sty" @click="delivery">提货</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    takeGoodsShow: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: false
    },
    // manage_goods.original（这是基酒所有参数） , manage_goods.product（这是成品酒所有参数）
    manage_goods: {
      type: null,
      default: {}
    }
  },
  data() {
    return {
      chooseRadio: 1,
      numValue: 1
    };
  },
  mounted() {
    this.chooseRadio = this.manage_goods.original.show ? 1 : this.manage_goods.product.show ? 2 : ""
  },
  methods: {
    closePopup() {
      this.$emit("update:takeGoodsShow", false);
    },
    delivery() {
      let json_data = {
        goodsId: this.chooseRadio == 1 ? this.manage_goods.original.goods_id : this.manage_goods.product.goods_id,
        total: this.numValue,
        stock_token: this.manage_goods.stock_token,
        take_type: this.chooseRadio,
        tag: "stock_service",
        take_way: this.name == '代销管理' ? 2 : this.name == '我的存货' ? 1 : '',
        option_id: this.chooseRadio == 1 ? this.manage_goods.original.option_id : this.manage_goods.product.option_id,
      };
      this.$router.push(
        this.fun.getUrl("goodsorder", {}, {...json_data})
      );
      this.$emit("update:takeGoodsShow", false);
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#take-goods {
  .popup-pane {
    margin: 1.31rem 1.5rem 0.94rem 1.5rem;

    .top-pane {
      display: flex;
      justify-content: center;
      position: relative;
      font-size: 1rem;
      font-weight: 500;
      color: #3b3b4a;
      align-items: center;
      line-height: 1;
    }

    .close-icon {
      position: absolute;
      right: 0;
      top: 25%;
      zoom: 0.8;
      color: #707070;
    }

    .type {
      display: flex;
      font-size: 0.88rem;
      font-weight: 400;
      color: #3b3b4a;
      margin: 1.63rem 0 2.06rem 0;

      .type-name {
        margin-right: 1.531em;
      }
    }

    .num {
      display: flex;
      justify-content: space-between;
      font-size: 0.88rem;
      font-weight: 400;
      color: #3b3b4a;
    }

    .tip {
      margin-top: 0.81rem;
      font-size: 0.69rem;
      font-weight: 400;
      color: #848484;
      text-align: left;
    }

    .btn-sty {
      background: #f51d1d;
      border-radius: 0.925rem;
      padding: 0.75rem 9.31rem;
      color: white;
      margin-top: 4.28rem;
      display: block;
    }
  }
}
</style>
